<template>
  <form-dialog
    ref="maintainRef"
    title="维护记录"
    :isButton="false"
    top="2vh"
    width="98%"
    :destroyOnClose="true"
  >
    <div class="dialog-body">
      <el-timeline style="padding-left: 2px">
        <el-timeline-item
          v-for="item in listConfig"
          :key="item.id"
          type="primary"
          timestamp="2024-07-29"
          placement="top"
        >
          <el-card>
            <el-descriptions :column="4" border>
              <el-descriptions-item label="车牌号码">{{ item.licenseplate }}</el-descriptions-item>
              <el-descriptions-item label="车型">{{ item.type }}</el-descriptions-item>
              <el-descriptions-item label="地盘(车身)号">{{ item.vin }}</el-descriptions-item>
              <el-descriptions-item label="维修合同编号">{{
                item.contractNo
              }}</el-descriptions-item>
              <el-descriptions-item label="接车日期">{{ item.receivingDate }}</el-descriptions-item>
              <el-descriptions-item label="进厂日期">{{ item.factoryDate }}</el-descriptions-item>
              <el-descriptions-item label="出厂日期">{{
                item.outFactoryDate
              }}</el-descriptions-item>
              <el-descriptions-item label="质量检验员">{{ item.inspector }}</el-descriptions-item>
              <el-descriptions-item label="承修单位" :span="2">{{
                item.company
              }}</el-descriptions-item>
              <el-descriptions-item label="检测站" :span="2">{{
                item.detectionStation
              }}</el-descriptions-item>
              <el-descriptions-item label="报告单"
                ><el-image
                  style="width: 100px; height: 100px"
                  :src="item.report"
                  :preview-src-list="[item.report]"
                />
              </el-descriptions-item>
              <el-descriptions-item label="合同"
                ><el-image
                  style="width: 100px; height: 100px"
                  :src="item.contract"
                  :preview-src-list="[item.contract]"
                />
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <div
        class="flex justify-center items-center text-[var(--el-color-primary)]"
        v-load-more="{ loadMore, options }"
      >
        加载更多<el-icon class="is-loading">
          <Loading />
        </el-icon>
      </div>
    </div>
  </form-dialog>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import FormDialog from "@/components/FormDialog.vue";
// import { showLoading, hideLoading } from "@/utils/index";

const listConfig = ref([
  {
    id: 1,
    time: "2024-7-30",
    licenseplate: "赣B88888",
    type: "中型客车",
    vin: "LFHC9K00ME002389",
    contractNo: "009232",
    receivingDate: "2024-7-30",
    factoryDate: "2024-7-30",
    outFactoryDate: "2024-7-30",
    inspector: "李明",
    company: "赣州辉煌汽车服务有限公司",
    detectionStation: "赣州清风机动车检测有限公司",
    report: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    contract: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
  }
]);
// 维护记录
const maintainRef = ref(null);
const options = ref({});
onMounted(() => {
  options.value = {
    root: (maintainRef.value as any).dialogRef.value
  };
});
// 打开弹框
const handleOpen = (id: number) => {
  console.log(id, "--test");
  handleDetail(id);
  (maintainRef.value as any).open();
};
// 获取维修记录详情
const handleDetail = (id: number) => {
  // showLoading();
  listConfig.value = [
    {
      id: 1,
      time: "2024-7-30",
      licenseplate: "赣B88888",
      type: "中型客车",
      vin: "LFHC9K00ME002389",
      contractNo: "009232",
      receivingDate: "2024-7-30",
      factoryDate: "2024-7-30",
      outFactoryDate: "2024-7-30",
      inspector: "李明",
      company: "赣州辉煌汽车服务有限公司",
      detectionStation: "赣州清风机动车检测有限公司",
      report: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      contract: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
    }
  ];
};
const loadMore = async () => {
  // const res = await new Promise((resolve) =>
  //   setTimeout(
  //     () =>
  //       resolve({
  //         id: 1,
  //         time: "2024-7-30",
  //         licenseplate: "赣B88888",
  //         type: "中型客车",
  //         vin: "LFHC9K00ME002389",
  //         contractNo: "009232",
  //         receivingDate: "2024-7-30",
  //         factoryDate: "2024-7-30",
  //         outFactoryDate: "2024-7-30",
  //         inspector: "李明",
  //         company: "赣州辉煌汽车服务有限公司",
  //         detectionStation: "赣州清风机动车检测有限公司",
  //         report: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
  //         contract: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
  //       }),
  //     2000
  //   )
  // );
  // listConfig.value.push(res);
};

defineExpose({
  handleOpen
});
</script>
<style scoped lang="scss">
.dialog-body {
  height: calc(100vh - 140px);
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
